<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="箱子类型" prop="boxType" label-width="150">
				<u-input type="select" :select-open="selectShow" v-model="model.boxType" placeholder="请选择箱子"
					@click="selectShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="是否正常" prop="isabnormal" label-width="150">
				<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth"
					:wrap="radioCheckWrap">
					<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<template v-if="radio!='正常'">
				<u-form-item :label-position="labelPosition" label="左侧" label-width="150">
					<u-input type="select" :select-open="leftShow" v-model="model.left" placeholder="请选择状态"
						@click="leftShow = true"></u-input>
				</u-form-item> 
				<u-form-item :label-position="labelPosition" label="右侧" label-width="150">
					<u-input type="select" :select-open="rightShow" v-model="model.right" placeholder="请选择状态"
						@click="rightShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="前面" label-width="150">
					<u-input type="select" :select-open="frontShow" v-model="model.front" placeholder="请选择状态"
						@click="frontShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="顶面" label-width="150">
					<u-input type="select" :select-open="topShow" v-model="model.top" placeholder="请选择状态"
						@click="topShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="底板" label-width="150">
					<u-input type="select" :select-open="floorShow" v-model="model.floor" placeholder="请选择状态"
						@click="floorShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="箱门" label-width="150">
					<u-input type="select" :select-open="rearShow" v-model="model.rear" placeholder="请选择状态"
						@click="rearShow = true"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="集装箱内部" label-width="150">
					<u-input type="select" :select-open="insideShow" v-model="model.inside" placeholder="请选择状态"
						@click="insideShow = true"></u-input>
				</u-form-item>
			</template> 
			<view class="imgflex">
				<view class=" uploadCon" @click="tapUpload(1)">
					<u-icon v-if="formdata.photo1==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.photo1" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
				<view class=" uploadCon" @click="tapUpload(2)">
					<u-icon v-if="formdata.photo2==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.photo2" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
				<view class=" uploadCon" @click="tapUpload(3)">
					<u-icon v-if="formdata.photo3==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.photo3" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
				<view class=" uploadCon" @click="tapUpload(4)">
					<u-icon v-if="formdata.photo4==''" name="photo" size="40"></u-icon>
					<image v-else :src="'https://api.zlkj-port.com/yqapi/ITally'+formdata.photo4" mode=""
						style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</u-form>
		<u-button @click="submit" :custom-style="customStyle">提交</u-button>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<u-select mode="single-column" :list="leftList" v-model="leftShow" @confirm="leftConfirm"></u-select>
		<u-select mode="single-column" :list="rightList" v-model="rightShow" @confirm="rightConfirm"></u-select>
		<u-select mode="single-column" :list="frontList" v-model="frontShow" @confirm="frontConfirm"></u-select>
		<u-select mode="single-column" :list="topList" v-model="topShow" @confirm="topConfirm"></u-select>
		<u-select mode="single-column" :list="floorList" v-model="floorShow" @confirm="floorConfirm"></u-select>
		<u-select mode="single-column" :list="rearList" v-model="rearShow" @confirm="rearConfirm"></u-select>
		<u-select mode="single-column" :list="insideList" v-model="insideShow" @confirm="insideConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			
			return {
				customStyle: {
					backgroundColor: '#2979ff',
					color: "#fff"
				},
				model: {
					isabnormal: '污箱',
					boxType: '普通集装箱',
					left: "污箱",
					right: "",
					front: "",
					top: "",
					floor: "",
					rear: "",
					inside: "",
					
				},
				formdata: {
					photo1:"",
					photo2:"",
					photo3:"",
					photo4:""
				},
				selectList: [{
						value: '普通集装箱',
						label: '普通集装箱'
					},
					{
						value: '冷藏集装箱',
						label: '冷藏集装箱'
					},
					{
						value: '特种集装箱',
						label: '特种集装箱'
					},
					{
						value: '发电机',
						label: '发电机'
					}
				],
				rules: {
					isabnormal: [{
						required: true,
						message: '请选择是否正常',
						trigger: 'change',
					}],
					boxType: [{
						required: true,
						message: '请选择箱子类型',
						trigger: 'change',
					}],
				},
				radioList: [{
						name: '正常',
						checked: false,
						disabled: false
					},
					{
						name: '残损',
						checked: false,
						disabled: false
					},
					{
						name: '污箱',
						checked: true,
						disabled: false
					}
				],
				radio: '污箱',
				selectShow: false,
				selectShow1: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
				leftShow: false,
				leftList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				rightShow: false,
				rightList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				frontShow: false,
				frontList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				topShow: false,
				topList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				floorShow: false,
				floorList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				insideShow: false,
				insideList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				rearShow: false,
				rearList: [{
						value: '破损/BR',
						label: '破损'
					},
					{
						value: '凹损/D',
						label: '凹损'
					},
					{
						value: '丢失/M',
						label: '丢失'
					},
					{
						value: '污箱/DR',
						label: '污箱'
					},
					{
						value: '危标/DL',
						label: '危标'
					},
				],
				id: null
			};
		},
		onLoad(options) {
			this.id = options.id
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			 
			submit() {
				let that = this;
				that.$refs.uForm.validate(valid => {
					if (valid) {
						if (that.radio != '正常') {
							if (that.model.left == '' && that.model.right == '' && that.model.front == '' && that
								.model.top == '' && that.model.floor == '' && that.model.rear == '' && that.model
								.inside == '') {
								return uni.showToast({
									title: '请选择异常情况',
									icon: 'none'
								})
							} else {
								let obj = {
									"左侧(LEFTSIDE)": that.model.left,
									"右侧(RIGHTSIDE)": that.model.right,
									"前面(FRONT)": that.model.front,
									"顶面(TOP)": that.model.top,
									"底板(FLOORBASE)": that.model.floor,
									"箱门(REAR)": that.model.rear,
									"集装箱内部(CONTAINERINSIDE)": that.model.inside
								}
								let arr = [];
								Object.keys(obj).forEach(function(key) {

									if (obj[key] != '') {
										arr.push(key + ':' + obj[key])
									}

								});

								console.log(arr)
								uni.showLoading({
									title: '提交中...'
								})

								let isabnormal = that.radio == '正常' ? 1 : (that.radio=='残损'?2:3)
								let abnormalexplain = that.radio == '正常' ? 'NM' : (that.radio=='残损'?'DM':'DRG')
								uni.request({
									url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/p3p3b94FF77pn0m?id=' +
										that.id + '&isabnormal=' + isabnormal + '&content=' + arr+'&abnormalexplain='+abnormalexplain
										.toString(),
									method: "get",
									success: (res) => {
										uni.hideLoading()
										let photos=[] 
										if(that.formdata.photo1!=''){
											photos.push({id:that.id,img_path:that.formdata.photo1})
										}
										if(that.formdata.photo2!=''){
											photos.push({id:that.id,img_path:that.formdata.photo2})
										}
										if(that.formdata.photo3!=''){
											photos.push({id:that.id,img_path:that.formdata.photo3})
										}
										if(that.formdata.photo4!=''){
											photos.push({id:that.id,img_path:that.formdata.photo4})
										}
										
										if(photos.length>0){
											uni.request({
												url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/z2vChWh2EuIWYzj',
												data: {
													List: JSON.stringify(photos)
												},
												method: "get"
											})
										} 
										
										uni.showToast({
											title:'提交成功'
										})
										let pages = getCurrentPages(); // 当前页面
										let beforePage = pages[pages.length - 2]; // 上一页
										uni.navigateBack({
										    success: function() {
										        beforePage.onLoad(); // 执行上一页的onLoad方法
										    }
										});
									}
								})
							}
						}else{
							// uni.showLoading({
							// 	title: '提交中...'
							// })
							
							let isabnormal = that.radio == '正常' ? 1 : (that.radio=='残损'?2:3)
							let abnormalexplain = that.radio == '正常' ? 'NM' : (that.radio=='残损'?'DM':'DR')
							uni.request({
								url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/p3p3b94FF77pn0m?id=' +
									that.id + '&isabnormal=' + isabnormal + '&content='+'&abnormalexplain='+abnormalexplain
									.toString(),
								method: "get",
								success: (res) => { 
									uni.hideLoading() 
									let photos=[]
									if(that.formdata.photo1!=''){
										photos.push({id:that.id,img_path:that.formdata.photo1})
									}
									if(that.formdata.photo2!=''){
										photos.push({id:that.id,img_path:that.formdata.photo2})
									}
									if(that.formdata.photo3!=''){
										photos.push({id:that.id,img_path:that.formdata.photo3})
									}
									if(that.formdata.photo4!=''){
										photos.push({id:that.id,img_path:that.formdata.photo4})
									}
									if(photos.length>0){
										uni.request({
											url: 'https://api.zlkj-port.com/szgjapi/zlzg/A/z2vChWh2EuIWYzj',
											data: {
												List: JSON.stringify(photos)
											},
											method: "get"
										})
									} 
									
									uni.showToast({
										title:'提交成功'
									})
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 上一页
									uni.navigateBack({
									    success: function() {
									        beforePage.onLoad(); // 执行上一页的onLoad方法
									    }
									});
									
								}
							})
							
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			tapUpload(type) {
				let that = this;
				
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) { 
						uni.uploadFile({
							url: 'https://api.zlkj-port.com/yqapi/ITally/App/fileUpload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let path = JSON.parse(uploadFileRes.data).filepath
								that.photo1 = path
								switch(type){
									case 1:that.formdata.photo1 = path;break;
									case 2:that.formdata.photo2 = path;break;
									case 3:that.formdata.photo3 = path;break;
									case 4:that.formdata.photo4 = path;break;
								} 
							}
						});
					}
				});
			},
			// radio选择发生变化
			radioGroupChange(e) {
				this.model.isabnormal = e;
			},
			selectConfirm(e) {
				this.model.boxType = '';
				e.map((val, index) => {
					this.model.boxType = val.label;
				})
			},
			leftConfirm(e) {
				e.map((val, index) => {
					this.model.left = val.value;
				})
			},
			rightConfirm(e) {
				e.map((val, index) => {
					this.model.right = val.value;
				})
			},
			frontConfirm(e) {
				e.map((val, index) => {
					this.model.front = val.value;
				})
			},
			topConfirm(e) {
				e.map((val, index) => {
					this.model.top = val.value;
				})
			},
			floorConfirm(e) {
				e.map((val, index) => {
					this.model.floor = val.value;
				})
			},
			rearConfirm(e) {
				e.map((val, index) => {
					this.model.rear = val.value;
				})
			},
			insideConfirm(e) {
				e.map((val, index) => {
					this.model.inside = val.value;
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}
	.uploadCon {
		width: 200rpx;
		height: 200rpx;
		border: 1rpx solid;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imgflex{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-bottom: 5px;
	}
</style>
